<template>
  <view class="container">
    <view class="forms">
      <nut-form :model-value="formData">
        <nut-form-item label="姓名" label-align="left" required>
          <nut-input
              v-model="formData.customerName"
              placeholder="请填写签收人姓名"
              :border="false"
          />
        </nut-form-item>
        <nut-form-item label="联系方式" label-align="left" required>
          <nut-input
              v-model="formData.phone"
              placeholder="请填写签收人联系方式"
              :border="false"
          />
        </nut-form-item>
        <nut-form-item label="身份证号码" label-align="left" required>
          <nut-input
              v-model="formData.customerIdNo"
              placeholder="请填写签收人身份证号码"
              :border="false"
          />
        </nut-form-item>
      </nut-form>
      <nut-form class="sign-form-item">
        <nut-form-item label="电子签名" label-align="top" required >
        </nut-form-item>
        <view class="sign_img" @click="toSignPage">
          <view class="text" v-if="!imgSignBase64">点击此处，绘制签名</view>
          <image :src="'data:image/png;base64,'+imgSignBase64" mode="scaleToFill" class="img" v-else></image>
        </view>
      </nut-form>
      <view class="tips">
        <view class="title">温馨提示：</view>
        <view class="main">
          收到货物后，请仔细检查货物情况。确认签收及代表货物已完好无损交付，自签收之时起该货物的损坏、短缺、灭失、污染、变质等一切风险和责任转移至收货人处，与承运人无关。
        </view>
      </view>
    </view>
    <view class="bottom_btns">
      <view class="left_btn" @click="goback">取消签收</view>
      <view class="right_btn" @click="submit">提交信息</view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import Taro, { useDidShow,useRouter } from "@tarojs/taro";
import { ref } from "vue";
import orderBody from "@/components/orderBody.vue";
import useMyOrderStore from "@/store/myOrder";
import {Del2} from "@nutui/icons-vue-taro";
import {$post, $upload} from "@/@api";
const orderStore = useMyOrderStore();
const formData = ref({
  customerName: orderStore.orderList.receiver||'',
  phone: orderStore.orderList.receiverMobile||'',
  customerIdNo: '',
})
const imgSignBase64 = ref<string>('')

useDidShow(()=>{
  let pages = Taro.getCurrentPages();
  let currPage = pages[pages.length - 1]
  if (currPage.__data__.base64) {
    imgSignBase64.value = currPage.__data__.base64
  }
  else{
    imgSignBase64.value = ''
  }
})

const toSignPage = ()=>{
  Taro.navigateTo({
    url: '/pages/sign/sign'
  })
}
const submit = async () => {
  if(!formData.value.customerName || !formData.value.phone || !formData.value.customerIdNo){
    Taro.showToast({
      icon: 'none',
      title: '请补全签收人信息'
    })
    return
  }
  if(!imgSignBase64.value){
    Taro.showToast({
      icon: 'none',
      title: '请先进行签名'
    })
    return
  }
  // let formData = new FormData()
  // formData.append('billNo',order.orderList.billNo)
  // formData.append('file',base64ToFile(imgSignBase64.value))
  let billNo = useRouter().params.billNo || ''
  let upData = {
    billNo,
    filePath: base64ToFile(imgSignBase64.value)
  }

  // 测试提交用，不进行签名文件上传
  // const res = await $post('/selfmachine-system/takeCargo/transaction',{
  //   billNos: billNo,
  //   ...formData.value
  // })
  // if(res.data.code == 200){
  //   Taro.navigateTo({
  //     url: '/pages/myOrder/signSuccess'
  //   })
  // }

  // 提交
  const imgRes = await $upload('/selfmachine-system/workerOrder/signPicUpload',upData)
  if (JSON.parse(imgRes.data).code === 200) {
    const res = await $post('/selfmachine-system/takeCargo/transaction',{
      billNos: billNo,
      ...formData.value
      //signatureImage:JSON.parse(imgRes.data).data.filePicUrl[0]
    })
    if(res.data.code == 200){
      Taro.navigateTo({
        url: '/pages/myOrder/signSuccess'
      })
    }
  } else {
    Taro.showToast({
      icon: 'none',
      title: '上传文件失败'
    })
  }


}

const base64ToFile = (code)=>{
  const fsm = Taro.getFileSystemManager();  // 获取文件管理器
  code = code .replace(/\ +/g, ""); //去掉空格方法
  code = code .replace(/[\r\n]/g, "");
  const buffer = Taro.base64ToArrayBuffer(code);  //  将 base64 字符串转成 ArrayBuffer 对象
  const fileName = Taro.env.USER_DATA_PATH + '/qm'+Math.random()+'.png';  // 文件系统中的用户目录路径 （本地路径）
  /**
   * @param fileName: 文件路径
   * @param buffer : 要写入的文本或二进制数据
   * @param binary: 指定写入文件的字符编码
   */
  fsm.writeFileSync(fileName, buffer, 'binary');  // 写入文件， 同步方法console.log(fileName);  // 写入成功后就可以访问到该图片路径了
  return fileName
}

const goback = () => {
  Taro.navigateBack()
}
</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.container {
  width: 100%;
  box-sizing: border-box;
  padding: 0 24rpx;
  .rows {
    width: 100%;
    box-sizing: border-box;
  }
  .forms {
    width: 100%;
    .h5-input.input-text {
      color: #252525;
    }
    .tips {
      width: 100%;
      margin-top: 16rpx;
      box-sizing: border-box;
      background-color: #e5efff;
      border: 1rpx solid #b2d0ff;
      border-radius: 8rpx;
      padding: 20rpx 24rpx;
      color: #666;
      .title {
        width: 100%;
        font-size: 24rpx;
        line-height: 32rpx;
      }
      .main {
        width: 100%;
        margin-top: 4rpx;
        font-size: 20rpx;
        line-height: 28rpx;
      }
    }
  }
}
.sign-form-item {
  .nut-cell-group .nut-cell::after {
    border: none;
  }
  .nut-cell-group {
    height: 364rpx;
    background-color: #fff;
    border-radius: 8rpx;
    .sign_img {
      width: calc(100% - 48rpx);
      margin-left: 24rpx;
      height: 228rpx;
      box-sizing: border-box;
      border: 1rpx dashed #c4c4c4;
      background-color: #f8f9fa;
      border-radius: 8rpx;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24rpx;
      .text {
        color: #0966ff;
        font-weight: bold;
        font-size: 26rpx;
      }
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.bottom_btns {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 128rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20rpx 24rpx;
  .left_btn {
    width: 340rpx;
    box-sizing: border-box;
    height: 100%;
    border-radius: 40rpx;
    color: #252525;
    background-color: #fff;
    line-height: 80rpx;
    font-size: 32rpx;
    text-align: center;
    border: 1rpx solid #c4c4c4;
  }
  .right_btn {
    width: 340rpx;
    box-sizing: border-box;
    height: 100%;
    border-radius: 40rpx;
    color: #fff;
    background-color: #0966ff;
    line-height: 80rpx;
    font-size: 32rpx;
    text-align: center;
  }
}
</style>
